<template>
  <div>
    <div class="uploadImage">
      <div :class="logoInfo?'showLogo':'hideLogo'" @click="cropperOpen">
        <i class="el-icon-plus logo-uploader" />
        <el-avatar v-if="logoInfo" shape="square" :size="50" :src="logoInfo" :title="$t('点击上传logo')" @click="cropperOpen" />
      </div>
    </div>
    <el-dialog :title="$t('修改logo')" :close-on-click-modal="false" :visible.sync="open" width="800px" append-to-body @open="cropperOpen">
      <div v-loading="loading">
        <el-row>
          <el-col :xs="24" :md="12" :style="{height: '350px'}">
            <vue-cropper
              ref="cropper"
              :img="options.img"
              :info="true"
              :full="options.full"
              :info-true="options.infoTrue"
              :can-move-box="options.canMoveBox"
              :auto-crop="options.autoCrop"
              :auto-crop-width="options.autoCropWidth"
              :auto-crop-height="options.autoCropHeight"
              :fixed-box="options.fixedBox"
              :output-type="outputType"
              @realTime="realTime"
              @imgLoad="imgLoad"
            />
          </el-col>
          <el-col :xs="24" :md="12" :style="{height: '350px'}">
            <div class="avatar-upload-preview" style="border-radius:0px!important;">
              <img :src="previews.url" :style="previews.img">
            </div>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :lg="2" :md="2">
            <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
              <el-button size="small">
                {{ $t('上传') }}
                <i class="el-icon-upload el-icon--right" />
              </el-button>
            </el-upload>
          </el-col>
          <el-col :lg="{span: 1, offset: 2}" :md="2">
            <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
          </el-col>
          <el-col :lg="{span: 1, offset: 1}" :md="2">
            <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
          </el-col>
          <el-col :lg="{span: 2, offset: 6}" :md="2">
            <el-button type="primary" size="small" @click="uploadImg()">{{ $t('提 交') }}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { VueCropper } from 'vue-cropper'
  export default {
    name: 'UploadAvatar',
    components: {
      VueCropper
    },
    props: {
      // logo
      logoInfo: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      outputType: {
        type: String,
        default: 'jpg',
        desc: '裁剪生成图片的格式'
      }
    },
    data() {
      return {
        loading: false,
        previews: {},
        options: {
          img: '', // 裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        imageUrl: '',
        // 是否显示弹出层
        open: false
      }
    },
    watch: {
      logoInfo: {
        handler(val) {
          if (val === null || val === '' || val === undefined) {
            this.options.img = ''
            this.close()
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      cropperOpen() {
        this.open = true
        this.options.img = this.logoInfo
      },
      // 覆盖默认的上传行为
      requestUpload() {
        this.loading = true
      },
      // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft()
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight()
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      // 上传预处理
      beforeUpload(file) {
        this.loading = true
        if (file.type.indexOf('image/') === -1) {
          this.msgError(this.$t('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。'))
        } else {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => {
            this.options.img = reader.result
            this.$emit('input', this.options.img)
          }
        }
      },
      // 上传图片
      uploadImg() {
        this.$refs.cropper.getCropBlob(data => {
          this.$emit('appendData', data)
          this.open = false
          this.$refs.cropper.clearCrop()
        })
      },
      close() {
        this.options.img = ''
        this.previews = {}
        if (this.$refs.cropper?.imgs !== undefined) {
          this.$refs.cropper.imgs = ''
        }
        if (this.$refs.cropper?.clearCrop !== undefined) {
          this.$refs.cropper.clearCrop()
        }
      },
      // 实时预览
      realTime(data) {
        this.previews = data
      },
      imgLoad(data) {
        if (data === 'success') {
          this.loading = false
        }
      }
    }
  }
</script>
